<template>
	<div class="message" v-moveout="hideMenu">
	<div class="message-name" @mouseenter="showMenu" @mouseleave="show=0">
		<slot></slot>
	</div>
	<div id="messagediv" ref="messagediv" class="drop-menu-items" :class="{'drop-menu-open':show==1,'drop-menu-close':show==0}" @mouseenter="show=1" >		
		<div class="message-content-head" :style="'width:'+rowwidth+'px;height:'+rowheight+'px;'">
			<div class="message-content-lable">通知事项</div>
			<div class="message-content-link" @click="linkToMessage">查看全部</div>
		</div>
		<template v-for="(item,index) in Array.from(menuitems)">	
			<div class="drop-menu-row" :style="'width:'+rowwidth+'px;line-height:'+rowheight+'px;'" @click="itemclick(item,index)">
				<div class="drop-menu-item" :style="'width:'+(rowwidth - 20)+'px;line-height:'+rowheight+'px;'" >
				<el-col :span="1">
					<span class="iconfont drop-menu-item-icon" :class="item.iconname"></span>
				</el-col>
				<el-col :span="22">
					<div  class="drop-menu-item-text">
					{{item.detail}}
					</div>
				</el-col>
				<el-col :span="1">
					<div class="drop-menu-item-dot" :class="{'green':item.grade==0,'yellow':item.grade==1,'red':item.grade==2}"></div>
				</el-col>
				</div>
			</div>						
		</template>
		<div v-if="placement=='top'" v-show="show == 1" class="toparrow" ref='arrow'></div>
		<div v-if="placement=='left'" v-show="show == 1" class="leftarrow" ref='arrow'></div>
		<div v-if="placement=='right'" v-show="show == 1" class="rightarrow" ref='arrow'></div>
		<div v-if="placement=='bottom'" v-show="show == 1" class="bottomarrow" ref='arrow'></div>
	</div>	
	</div>
</template>

<script>	
	import moveout from "@/directives/moveout.js"
	import {homeMsgList} from '@/system/api/message.js'
	export default {
		name: "messageMemu",//下拉菜单
		directives: { moveout },
		props: {
			rowwidth: {
				default: 400
			},				
			rowheight: {
				default: 44
			},		
			trriger:{default:'hover'},
			placement:{default:'top'},
			menuleft:{
				default:0
			},
			arrowleft:{
				default:0
			},
			scrollTop:{default:0},
			parentitem:{default:null},
			
		},
		watch: {
		},
		data() {
			return {
				show: -1,
				scrollLeft:0,
				etarget:null,
				menuHeight:200,
				menuitems: [],
				interval: null,
			}
		},
		computed: {

		},
		methods: {
			hideMenu(e){
				if(this.show == 1){									
//					console.log(e.clientX + '  ' + this.$refs.messagediv.offsetLeft + '  '+ (this.$refs.messagediv.offsetLeft + this.rowwidth) +'**'+ e.clientY  + '  '+ this.$refs.messagediv.offsetTop + '   ' + (this.$refs.messagediv.offsetTop  + this.menuHeight) )
					if(	e.clientX>this.$refs.messagediv.offsetLeft
						&& e.clientX< this.$refs.messagediv.offsetLeft + this.rowwidth
						&& e.clientY> this.$refs.messagediv.offsetTop 
						&& e.clientY< this.$refs.messagediv.offsetTop  + this.menuHeight){							
					}else{
						this.show = 0;
					}					
				}				
			},
			itemclick(item,index) {
				this.show = 0;
				setTimeout( () => {	
					this.$store.dispatch("refreshCurMsg", item)
					this.$router.push({name:'message',params:{row:item}});	        
					this.$emit('close', true);
				},300);
				
			},
			linkToMessage(){
				this.$router.push({name:'message'});	        
			},
			showMenu(e){
				this.show = 1;				
				//e.target.offsetLeft  target.offsetHeight
				this.scrollLeft = e.target.ownerDocument.childNodes[1].scrollLeft;
				this.etarget = e.target;
				this.$refs.messagediv.style.top = this.$refs.messagediv.offsetTop - this.scrollTop + 'px';
				this.$refs.messagediv.style.left = e.target.offsetLeft - this.scrollLeft + this.menuleft +(this.$refs.messagediv.parentNode.offsetWidth - this.$refs.messagediv.offsetWidth) + 'px';	
				this.$refs.arrow.style.top = this.$refs.messagediv.offsetTop - 10 - this.scrollTop + 'px';
				this.$refs.arrow.style.left = e.target.offsetLeft - this.scrollLeft + this.arrowleft + parseInt(this.$refs.messagediv.parentNode.offsetWidth /2) + 'px';
			},
			mouseleave(e){						
				if(e.offsetX <= 0 || e.offsetX >= this.rowwidth || e.offsetY <= 0){
					if(e.clientX >= (this.etarget.offsetLeft - this.scrollLeft) && e.clientX <= (this.etarget.offsetWidth + this.etarget.offsetLeft - this.scrollLeft)){
							
						}else{
							this.show = 0;
						}
				}else{
					if(e.offsetY > 30){
						this.show = 0
					}
				}
			},
			homeMsgList(){				
				let param = {msgType: null,state: 3,keyword: null,beginTime: null,endTime: null, page: 0 ,pageSize: 6}
				homeMsgList(param).then((res)=>{	
					if(res.success){
						this.menuitems = res.info;					
						for(let i=0;i<this.menuitems.length;i++){
							let msg = this.menuitems[i];
							if(msg.msgType == 1){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-daibanliucheng');
							}
							if(msg.msgType == 2){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-daibanyewu');
							}
							if(msg.msgType == 3){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-yujingxiaoxi');
							}
							if(msg.msgType == 4){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-gonggaoxinxi');
							}
							if(msg.msgType == 5){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-xinshixinxi');
							}
							if(msg.msgType == 6){
								this.$set(msg,'iconname','iconxitongpingtai-xiaoxizhongxin-duanxinxiaoxi');
							}
						}
						this.menuHeight = this.menuitems.length * this.rowheight + this.rowheight + 36; 			
						this.$refs.messagediv.style.setProperty('--menu-height', this.menuHeight+'px');
						this.$refs.messagediv.style.setProperty('--dot-margin-top',(this.rowheight - 6)/2 +'px');
					}else{
						this.menuitems = [];
						this.menuHeight = this.menuitems.length * this.rowheight + this.rowheight*2 + 36;
						this.$refs.messagediv.style.setProperty('--menu-height', this.menuHeight+'px');
					}	
					this.$emit('setMessage',this.menuitems.length)
				})
			}
		},
		mounted() {	
			this.homeMsgList();
			this.interval = setInterval(this.homeMsgList, 300000);
//			console.log(this.$refs.messagediv.offsetLeft);
//			console.log(this.$refs.messagediv.offsetTop);
//			console.log(this.$refs.messagediv.offsetWidth);
//			console.log(this.$refs.messagediv.offsetHeight);
//			
//			console.log(this.$refs.messagediv.parentNode.offsetLeft);	
//			console.log(this.$refs.messagediv.parentNode.offsetTop);
//			console.log(this.$refs.messagediv.parentNode.offsetWidth);	
//			console.log(this.$refs.messagediv.parentNode.offsetHeight);
//			console.log(this.$refs);
			
//			if(this.placement=='top'){	
//				this.$refs.messagediv.style.top = this.$refs.messagediv.offsetTop - this.scrollTop + 'px';
//				this.$refs.messagediv.style.left = this.$refs.messagediv.parentNode.offsetLeft + this.menuleft +(this.$refs.messagediv.parentNode.offsetWidth - this.$refs.messagediv.offsetWidth) + 'px';	
//				this.$refs.arrow.style.top = this.$refs.messagediv.offsetTop - 10 - this.scrollTop + 'px';
//				this.$refs.arrow.style.left = this.$refs.messagediv.parentNode.offsetLeft + this.arrowleft + parseInt(this.$refs.messagediv.parentNode.offsetWidth /2) + 'px';
//			}
				
		},
		destroyed(){
			clearInterval(this.interval);
		}
	}
</script>

<style scoped>		
	#messagediv{
		--menu-height:0px;
		--dot-margin-top:0px;
	}	
	.drop-menu-row{
		padding: 0 10px;
	}
	.drop-menu-items {	
		background: var(--page-back-color);
		color:var(--page-lable-text-color);			
		box-shadow:0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
		font-size: 14px;		
		position: fixed;
		overflow: hidden;	
		height: 0;	
		z-index: 99;			
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;	
		opacity: 0.9;	
	}	
	.message-content-head{	
		margin-top: 10px;
		padding: 0 10px;	
		display: flex;		
	}
	.message-content-lable{
		line-height: 36px;
    	width: 75%;
    	text-align: left;
	}
	.message-content-link{
		line-height: 36px;
		width: 25%;
		text-align: right;
		color: var(--icon-color);
	}
	.drop-menu-open{
		height: var(--menu-height);
		animation: menuopen 0.3s;
	}
	@keyframes menuopen {
		from {			
			height: 0;
		}
		to {			
			height: var(--menu-height);
		}
	}
	.drop-menu-close{
		height: 0;
		animation: menuclose 0.3s;
	}
	@keyframes menuclose{
		from{
			height: var(--menu-height);
		}
		to{
			height: 0;
		}
	}
	.drop-menu-item {
		cursor: pointer;		
		padding: 0 10px;
		display: flex;
		border-top: 1px solid var(--sys-menu-border-color);
	}	
	.drop-menu-item:nth-last-child(2){
		margin-bottom: 10px;
	}
	.drop-menu-item:hover{
		background: var(--button-hover-back-color);		
		color: var(--button-active-text-color);
		cursor: pointer;	
	}
	.drop-menu-item:active{
		background: var(--button-active-back-color);
		color: var(--button-active-text-color);
		cursor: pointer;
	}
	.iconbefore{
		margin-right: 10px;	
		color: var(--icon-color);	
	}
	.iconafter{
		margin-left: 10px;
		color: var(--icon-new-color);
	}
	.toparrow{
		position: fixed;
		border-style: solid;
	    border-width: 0px 10px 10px 10px;
	    border-color: transparent transparent var(--drop-menu-arrow-color) transparent;
	    width: 0px;
	    height: 0px;
	}
	.leftarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 10px 0px;
        border-color: transparent var(--drop-menu-arrow-color) transparent transparent ;
        width: 0px;
        height: 0px;
	}
	.rightarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent var(--drop-menu-arrow-color);
        width: 0px;
        height: 0px;
	}
	.bottomarrow{
		position: fixed;
		border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: var(--drop-menu-arrow-color) transparent transparent transparent;
        width: 0px;
        height: 0px;
	}	

	/*图标*/
	.editicon{
		color: var(--icon-edit-color);	
		margin-right: 13px;	
	}
	.editicon:before{
		content: "\e6d2";		
	}
	
	.delicon{
		color: var(--icon-xx-color);
		margin-right: 13px;			
	}
	.delicon:before{
		content: "\e600";		
	}
	
	.enableicon{
		color: var(--icon-save-color);	
		margin-right: 13px;		
	}
	.enableicon:before{
		content: "\e6d2";		
	}
	
	.disableicon{
		color: var(--icon-edit-color);	
		margin-right: 13px;		
	}
	.disableicon:before{
		content: "\e6d2";		
	}
	/*dot 颜色设定*/
	.green{
		background: rgba(0, 204, 0, 1);
	}
	.yellow{
		background: rgba(255, 192, 0, 1);
	}
	.red{
		background: rgba(255, 0, 0, 1);
	}
	.drop-menu-item-dot{		
		margin-left: 10px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		border: none;
		margin-top: var(--dot-margin-top);
	}
	.drop-menu-item-icon{
		color: var(--icon-color);		
		font-size: 16px;		
	}
	.drop-menu-item-text{		
		text-overflow: ellipsis;
		overflow: hidden;
		white-space:nowrap;		
	}
	.el-col-22 {	    
	    text-align: left;
	    padding-left: 10px;
	}
</style>